<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%  
response.setHeader("Access-Control-Allow-Origin", "*");  
%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>专家人才·数据工厂</title>
	<link href="${pageContext.request.contextPath }/img/webLogoIcon.png" rel="shortcut icon">
    <link href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/font-awesome.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/style.css" rel="stylesheet">
    <!-- FooTable -->
    <link href="${pageContext.request.contextPath }/css/footable.core.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/css/mypage.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/xscss/xs.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/xscss/normalize.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/xscss/htmleaf-demo.css" rel="stylesheet">
    <style>
		.select2_demo_1{
			float: left;
			width: 120px;
			display: inline;
			margin-left: 10px;
		}
		.form-control{
			display: inline;
		}
		
		.col-sm-3{
			float:right;
			width: 560px;
		}
		.input-group{
			float:right;
			width: 240px;
			margin-left: 5px;
		}
	   td{
	        vertical-align:middle;
	    }
	    .source{
	    	display:inline-block;
	        cursor: pointer;
		   	margin-bottom: 10px;
		    padding: 5px 5px;
		    border: 1px solid #ccc;
		    border-radius: 4px;
		    margin-right: 20px;
   		}
   		.sourceAct{
   			border-color:#f8ac59;
   			color:#f8ac59;
   		}
   		.webAct{
   			border-color:#f8ac59 !important;
   			color:#f8ac59;
   		}
   		.web{
	    	display:inline-block;
	        cursor: pointer;
		   	margin-bottom: 10px;
		    padding: 5px 5px;
		    border: 1px solid #ccc;
		    border-radius: 4px;
		    margin-right: 20px;
   		}
   		.search-result p{
   			font-size:14px;
   		}
	</style>
</head>
<body>
    <div id="wrapper">
        <nav class="navbar-default navbar-static-side" role="navigation">
            <%request.setAttribute("LEFT", "talents-dataBase");%>
            <%@include file="../components/left.jsp"%>
        </nav>
        <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom" style="margin-bottom: 20px;">
		<jsp:include page="../components/head.jsp" flush="true" />
        </div>
        <div class="row wrapper border-bottom white-bg page-heading m-b-20">
            <div class="col-lg-9">
                <h2>专家人才</h2>
                <ol class="breadcrumb">
                	<li class="nav-main1">
                		<a href="${pageContext.request.contextPath}/admin/tosystem_overview">主页</a>
                	</li>
                	<li class="nav-main2" >
                		<a id="navigation1" href="${pageContext.request.contextPath}/talentsDataBase/talents-dataBase">专家人才</a>
                	</li>
                	<li class="active">
                		<span id="talentName"></span>
                	</li>
               	</ol>
            </div>
        </div>
        <div class="content-item-box">
			<div class="content-item-1">
				<div class="content-item-touxiang">
					<a id="avatar" href="" target="_blank" class="item-link">
						<img id="img" src="" onerror=src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2146034403,1504718527&fm=26&gp=0.jpg">
					</a>
				</div>
				<div class="item-xiangqing">
					<div id="title" class="item-username">
					</div>
					<div id="institution" class="item-usernameNumber"></div>
					<div style="clear: both;">
						被看次数：
						<span id="views"></span>
					</div>
					<ul class="xiangqinglist">
						<li class="li1">
							<p>被引频次</p>
							<p id="times_cited"></p>
						</li>
						<li class="li1">
							<p>成果数</p>
							<p id="works"></p>
						</li>
						<li class="li1">
							<p>H指数</p>
							<p id="H_index"></p>
						</li>
						<li class="li1">
							<p>G指数</p>
							<p id="G_index"></p>
						</li>
					</ul>
					<div class="worker-content">
						<div>
							<span class="worker-content-title">领域: &nbsp;</span>
							<span>
								<a id="field" href="#" class="worker-link" style="color: grey;"></a>
							</span>
						</div>
						<div>
							<span class="worker-content-title">详情地址: &nbsp;</span>
							<span>
								<a id="detail_url" href="#" target="_blank" class="worker-link" style="color: grey;"></a>
							</span>
						</div>
						<div>
							<span class="worker-content-title">来源: &nbsp;</span>
							<span>
								<a id="source_name" href="#" class="worker-link" style="color: grey;"></a>
							</span>
						</div>
					</div>
				</div>
			</div>
			<div class="effectmap_pie">
				<div class="pie_map_wrapper">
					<div class="pie_map_container">
						<div class="pie_map_container_item">
							<div class="pie_map_container_item_text">
								<div class="circleChart" id="circle1"></div>
								<div class="content-item-contentadsd">
									期刊
									<p style="font-size: 18px;color: #333;">76.3%</p>
								</div>
							</div>
							<div
								style="position: relative;float: left;margin-right: 60px;width: 100px;height: 100px;z-index: 4;cursor: pointer;">
								<div class="circleChart" id="circle2"></div>
								<div
									style="position: absolute;z-index: 100;text-align: center;width: 100%;top: 30px;left: 0;height: 40px;color: #666;">
									会议
									<p style="font-size: 18px;color: #333;">11.1%</p>
								</div>
							</div>
							<div
								style="position: relative;float: left;margin-right: 60px;width: 100px;height: 100px;z-index: 4;cursor: pointer;">
								<div class="circleChart" id="circle3"></div>
								<div
									style="position: absolute;z-index: 100;text-align: center;width: 100%;top: 30px;left: 0;height: 40px;color: #666;">
									专著
									<p style="font-size: 18px;color: #333;">0%</p>
								</div>
							</div>
							<div
								style="position: relative;float: left; width: 100px;height: 100px;z-index: 4;cursor: pointer;">
								<div class="circleChart" id="circle4"></div>
								<div
									style="position: absolute;z-index: 100;text-align: center;width: 100%;top: 30px;left: 0;height: 40px;color: #666;">
									其它
									<p style="font-size: 18px;color: #333;">0%</p>
								</div>
							</div>
						</div>
						<div class="zongshu">
							总计
							<p id="works" class="number"></p>
						</div>
					</div>
					<div class="effectmap_line_wr">
						<div class="col-lg-3">
							<div class="ibox">
								<div class="ibox-content">
									<h5>24小时访问量</h5>
									<h2>198 009</h2>
									<div id="sparkline1"></div>
								</div>
							</div>
						</div>
						<div class="col-lg-3">
							<div class="ibox">
								<div class="ibox-content">
									<h5>周访问量</h5>
									<h2>65 000</h2>
									<div id="sparkline2"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="btn-groupBox" style="margin-bottom: 0;">
					<div class="btn-groupBox1">
						<div class="btn-group">
							<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							  Action <span class="caret"></span>
							</button>
							<ul class="dropdown-menu">
							  <li><a href="#">Action</a></li>
							  <li><a href="#">Another action</a></li>
							  <li><a href="#">Something else here</a></li>
							  <li role="separator" class="divider"></li>
							  <li><a href="#">Separated link</a></li>
							</ul>
						</div>
						<div class="btn-group">
							<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							  Action <span class="caret"></span>
							</button>
							<ul class="dropdown-menu">
							  <li><a href="#">Action</a></li>
							  <li><a href="#">Another action</a></li>
							  <li><a href="#">Something else here</a></li>
							  <li role="separator" class="divider"></li>
							  <li><a href="#">Separated link</a></li>
							</ul>
						</div>
						<div class="btn-group">
							<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							  Action <span class="caret"></span>
							</button>
							<ul class="dropdown-menu">
							  <li><a href="#">Action</a></li>
							  <li><a href="#">Another action</a></li>
							  <li><a href="#">Something else here</a></li>
							  <li role="separator" class="divider"></li>
							  <li><a href="#">Separated link</a></li>
							</ul>
						</div>
						<div class="btn-group">
							<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							  Action <span class="caret"></span>
							</button>
							<ul class="dropdown-menu">
							  <li><a href="#">Action</a></li>
							  <li><a href="#">Another action</a></li>
							  <li><a href="#">Something else here</a></li>
							  <li role="separator" class="divider"></li>
							  <li><a href="#">Separated link</a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="in_content_result_wr">
					<!-- <div class="unfinde">
						<h2>暂无数据</h2>
					</div> -->
					<!-- <div style="display: none;"> -->
					<div class="in_conternt_reslist">
						<div class="result">
							<div class="res_con" style="color: #666;">
								<h3 class="text-center">
									期刊数量：<span id="quantity">不详</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									被引用百分比：<span id="percentage">不详</span>
								</h3>
								<div id="detail" class="res_info text-center">
								
								</div>
							</div>
						</div>
					</div>
					<!-- <div class="text-center">
						<div class="btn-group">
							<button class="btn btn-white" type="button"><i class="fa fa-chevron-left"></i></button>
							<button class="btn btn-white">1</button>
							<button class="btn btn-white  active">2</button>
							<button class="btn btn-white">3</button>
							<button class="btn btn-white">4</button>
							<button class="btn btn-white">5</button>
							<button class="btn btn-white">6</button>
							<button class="btn btn-white">7</button>
							<button class="btn btn-white" type="button"><i class="fa fa-chevron-right"></i> </button>
						</div>
					</div> -->
					<!-- </div> -->
				</div>
			</div>
			<div style="float: right;width: 370px;">
				<div style="border-bottom: 1px dotted #bfbfbf;padding-bottom: 17px;margin-top: 25px;color: #666;">
					<h3 class="username">
						<a href="" class="co_author_more">更多>></a>
						<span class="username-span h3">合作学者</span>
					</h3>
					<div class="co_authorlist">
						<div class="co_author_item">
							<a href="" class="au_img_link">
								<img src="./img/a1.jpg" >
							</a>
							<span class="au_info">
								<p>
									<a href="">鲁鹏</a>
								</p>
								<p>
									<span>山东大学哲学与社会发展学院</span>
								</p>
							</span>
						</div>
						<div class="co_author_item">
							<a href="" class="au_img_link">
								<img src="./img/a1.jpg" >
							</a>
							<span class="au_info">
								<p>
									<a href="">鲁鹏</a>
								</p>
								<p>
									<span>山东大学哲学与社会发展学院</span>
								</p>
							</span>
						</div>
						<div class="co_author_item">
							<a href="" class="au_img_link">
								<img src="./img/a1.jpg" >
							</a>
							<span class="au_info">
								<p>
									<a href="">鲁鹏</a>
								</p>
								<p>
									<span>山东大学哲学与社会发展学院</span>
								</p>
							</span>
						</div>
						<div class="co_author_item">
							<a href="" class="au_img_link">
								<img src="./img/a1.jpg" >
							</a>
							<span class="au_info">
								<p>
									<a href="">鲁鹏</a>
								</p>
								<p>
									<span>山东大学哲学与社会发展学院</span>
								</p>
							</span>
						</div>
					</div>
				</div>
				<div class="co_affiliate_wr" style="color: #666;">
					<h2>合作机构</h2>
					<ul id="cooperation_agency">
						
					</ul>
				</div>
			</div>
		</div>
		<jsp:include page="../components/footer.jsp" flush="true" />
        </div>
        </div>
    <!-- Mainly scripts -->
    <script src="${pageContext.request.contextPath }/js/jquery-2.1.1.js"></script>
    <script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/jquery.metisMenu.js"></script>
    <script src="${pageContext.request.contextPath }/js/jquery.slimscroll.min.js"></script>
    <!-- Custom and plugin javascript -->
<%--     <script src="${pageContext.request.contextPath }/js/inspinia.js"></script> --%>
    <script src="${pageContext.request.contextPath }/js/pace.min.js"></script>
    <!-- FooTable -->
    <script src="${pageContext.request.contextPath }/js/footable.all.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/mypage.js"></script>
    <!-- Page-Level Scripts -->
    <script src="${pageContext.request.contextPath}/js/xsjs/circleChart.es5.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/xsjs/circleChart.js"></script>
    <script src="${pageContext.request.contextPath}/js/xsjs/circleChart.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/xsjs/jquery-1.11.0.min.js"></script>
    <script>
    
        // $(document).ready(function() {
        //     $('.footable').footable();
        // });
        
        <% 
	        String article_public_id = (String)request.getParameter("article_public_id");
	    %>
	    var article_public_id = '<%=article_public_id%>'
        
        $(function(){
        	detail()
		});
        
		function detail(){
        	$.ajax({
        		url : "${pageContext.request.contextPath}/talentsDataBase/talentDetail",
        		type : "post",
        		data:{
        			article_public_id: article_public_id
        		},
        		success : function(res1) {
        			let res = JSON.parse(res1).list[0];
        			document.getElementById("talentName").innerHTML=res.title
        			let arr=JSON.parse(res.field)
        			let fieldStr=new String()
        			for(let i=0;i<arr.length;i++){
        				fieldStr+=arr[i]+"  "
        			}
					document.getElementById("avatar").href=res.detail_url
					document.getElementById("img").src=res.avatar
					document.getElementById("title").innerHTML=res.title
					document.getElementById("views").innerHTML=res.views
					document.getElementById("institution").innerHTML=res.institution
					document.getElementById("times_cited").innerHTML=res.times_cited
					document.getElementById("works").innerHTML=res.works
					document.getElementById("H_index").innerHTML=res.H_index
					document.getElementById("G_index").innerHTML=res.G_index
					document.getElementById("field").innerHTML=fieldStr
					document.getElementById("detail_url").href=res.detail_url
					document.getElementById("detail_url").innerHTML=res.detail_url
					document.getElementById("source_name").innerHTML=res.source_name
					let cooperation_agencyArr=JSON.parse(res.cooperation_agency)
					for (const i in cooperation_agencyArr) {
						$('#cooperation_agency').append('<li>'
								+'<span class="co_paper_name">'
								+'<span class="cooperation_agency">'+cooperation_agencyArr[i].agency+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>'
								+'<span>合作次数：'+cooperation_agencyArr[i].frequency+'</span>'
								+'</span>'
						+'</li>');
					}
					let periodicalObj=JSON.parse(res.periodical)
					if(periodicalObj.quantity!==undefined){
						document.getElementById("quantity").innerHTML=periodicalObj.quantity
						document.getElementById("percentage").innerHTML=periodicalObj.percentage*100+'%'
						for (const key of Object.keys(periodicalObj.detail)) {
							$('#detail').append(
								'<span style="font-size: 1.3em;">'+key+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>'+
								'<span>'+
									'<span style="font-size: 1.3em;">被引量: </span>'+
									'<span style="font-size: 1.3em;">'+(periodicalObj.detail)[key]+'</span><br>'+
								'</span>'
							)
						}
					}
        		},
        		error: function(err) {
        			console.log(err)
        		}
        	});
        }
		
		//跑马灯方法 
// 		 function init(){
// 			    //获取标题
// 			    var title=document.title;
// 			    //分割字符串--->字符数组
// 			    var arr=title.split("");
// 			    //删除第一个元素并返回该元素
// 			    var e=arr.shift();
// 			    //把一个对象添加到数组末尾
// 			    arr.push(e);
// 			    //把数组转换成字符串
// 			    var marquee=arr.join("");
// 			    //返回给浏览器
// 			    document.title=marquee;
// 			    //定时一直执行
// 			    window.setTimeout("init()",1000);
// 			}
// 			window.onload=init;
    </script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
</body>
</html>
